<template>
  <div class="contain">
    <div class="model">
      <el-row :gutter="45">
        <el-col class="left" :span="5">
          <div>
            <div class="title">组织领导</div>
            <ul>
              <li
                v-for="(item, index) in leftList"
                :key="index"
                :class="indexIndex == index ? 'active' : ''"
                @click="changeLeader(index)"
              >
                <span>{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="19" class="right">
          <div class="title">
            <div class="tip">
              <span>内设机构</span>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col
              v-for="(item, index) in rightList"
              :key="index"
              :span="6"
              class="el_col"
            >
              <div class="items">
                {{
                  item.name.length > 8
                    ? item.name.substring(0, 12) + "..."
                    : item.name
                }}
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexIndex: 0,
      leftList: [
        {
          name: "领导"
        },
        {
          name: "委厅职能职责"
        },
        {
          name: "内设机构"
        }
      ],
      rightList: [
        {
          name: "办公室（省委教育工委办公办公办公办公）"
        }
      ]
    };
  },
  methods: {
    changeLeader(index) {
      this.indexIndex = index;
    }
  },
  mounted() {
    for (let i = 0; i < 20; i++) {
      this.rightList.push({
        name: "办公室（省委教育工委办公办公办公办公）"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.contain {
  background-color: #ffffff;
  .model {
    width: 1600px;
    margin: 0 auto;
    padding: 40px 0;
    .left {
      .title {
        font-size: 24px;
        color: #ffffff;
        background-color: $base-color;
        text-align: center;
        padding: 18px 0;
        font-weight: 700;
      }
      ul {
        padding: 20px 0;
        background-color: #fafafa;
        li {
          transition: 0.3s;
          color: #333;
          position: relative;
          height: 56px;
          transition: 0.3s;
          cursor: pointer;
          &::before {
            transition: 0.3s;
            width: 5px;
            height: 0;
            content: " ";
            display: block;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: $font-color;
          }
          &:hover {
            background-color: #ffffff;
            color: $font-color;
            &::before {
              height: 100%;
            }
          }
          span {
            font-size: 20px;
            margin-left: 70px;
            padding: 15px 0;
            display: block;
            font-weight: 500;
          }
        }
        li.active {
          background-color: #ffffff;
          color: $font-color;
          cursor: default;
          &::before {
            height: 100%;
          }
        }
      }
    }
    .right {
      > .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .tip {
          width: 225px;
          height: 61px;
          background-image: url("../../assets/images/jkq/tipTitle.svg");
          background-size: cover;
          background-repeat: no-repeat;
          color: #ffffff;
          font-size: 22px;
          span {
            width: 220px;
            height: 53px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .el_col {
        margin-bottom: 20px;
        .items {
          border: 1px solid #eeeeee;
          height: 60px;
          display: flex;
          align-items: center;
          padding-left: 40px;
          overflow: hidden;
          cursor: pointer;
          position: relative;
          transition: 0.3s;
          &::before {
            width: 10px;
            height: 10px;
            content: "";
            display: block;
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #eaeaea;
            border-radius: 50%;
            transition: 0.3s;
          }
          &:hover {
            color: $font-color;
            &::before {
              background-color: $font-color;
            }
          }
        }
      }
    }
  }
}
</style>
